<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GxPop.js</title>
<link rel="stylesheet" type="text/css" href="css/GxPop.css"/>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
	button[class^='btn']{ display: block; padding: 10px; margin-bottom: 10px;}
	button[class^='btn']:active{background: #666;}
</style>
</head>
<body>
	
<button class="btn0">是否打印参数</button>
<button class="btn2">提示</button>
<button class="btn12">弹出后执行其他</button>

<button class="btn3">带头部、icon的提示</button>
<button class="btn4">自定宽高、自动移除、带按钮的提示</button>
<button class="btn5">参数使用</button>


<button class="btn6">右下角弹出</button>
<button class="btn7">左下角弹出</button>
<button class="btn8">下弹出</button>

<button class="btn9">上弹出</button>
<button class="btn10">左上角弹出</button>
<button class="btn11">右上弹出</button>
<button class="btn12">autoRun</button>
<button class="btn13">endDate</button>
<button class="btn14">cookie</button>


<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="js/GxPop.min.js"></script>
<script>
$(".btn0").on("click",function(){
	$.GxPop({
		content:"打印参数",
		isConsole:true
	});
});

$(".btn2").on("click",function(){
	$.GxPop({
		content:"嗯嗯，就是这样！"
	});
});

$(".btn3").on("click",function(){
	$.GxPop({
		title:true,
		content:"嗯嗯，就是这样！",
		closeBtn:true
	});
});

$(".btn4").on("click",function(){
	$.GxPop({
		title:"呵呵",
		boxCss:{
			width:200
			//height:200
			},
		content:"嗯嗯，就是这样！",
		btn:[{
			text:"确定",
			callback:function(){
				alert("确定");
			}
		}],
		delay:3000
	});
});


$(".btn5").on("click",function(){
	$.GxPop({
		title:"提示",
		content:"嗯嗯，就是这样！",
		wrapCss:{
			"background":"rgba(0,0,0,0.8)"
		},
		boxCss:{
			width:"200px",// 百分比%也可以， 纯数字也可以
			height:200// 百分比%也可以， 纯数字也可以
		},
		headerCss:{"color":"#fff","background":"#03A9F4","font-size":"20px"},
		contentCss:{"color":"#f00"},
		footerCss:{"border-top":"1px solid #d0f0ff"},
		delay:3000,
		closeBtn:true,
		clickWrap:false,
		btn:[
			{
				text:"确定",
				btnCss:{
					"border":"1px solid #3a863d",
					"color":"#fff",
					"background":"#4CAF50"
				},
				callback:function(){
					$.GxPop({content:"嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯"});
					//return "gx";//移除作用
				}
			},
			{
				text:"关闭",
				btnCss:{
					"color":"#fff",
					"border":"1px solid #c7382d",
					"background":"#F44336"
				},
				callback:function(){
					return "gx";//移除作用
				}
			}
		],
		//动画
		animate:{
			inName:"bounceIn",
			outName:"bounceOut",
			outNameContinuedTime:300
		}
	});

});

//右下角弹出
$(".btn6").on("click",function(){
	$.GxPop({
		title:"提示",
		boxCss:{
			"right":"0",
			"bottom":"0",
			"top":"initial",
			"left":"initial",
			width:200
			//height:200
		},
		content:"右下角弹出",
		btn:[{
			text:"关闭",
			callback:function(){
				return "gx";
			}
		}]
	});
});

//左下角弹出
$(".btn7").on("click",function(){
	$.GxPop({
		title:"提示",
		boxCss:{
			width:200,
			//height:200
			"left":"0",
			"bottom":"0",
			"top":"initial"
		},
		content:"左下角弹出",
		btn:[{
			text:"关闭",
			callback:function(){
				return "gx";
			}
		}]
	});
});

//下弹出
$(".btn8").on("click",function(){
	$.GxPop({
		title:"提示",
		boxCss:{
			width:"200px",
			//height:200
			"bottom":"0",
			"top":"initial"
		},
		content:"下弹出",
		btn:[{
			text:"关闭",
			callback:function(){
				return "gx";
			}
		}]
	});
});



//上弹出
$(".btn9").on("click",function(){
	$.GxPop({
		title:"提示",
		boxCss:{
			"top":"0",
			width:200
			//height:200
		},
		content:"上弹出",
		btn:[{
			text:"关闭",
			callback:function(){
				return "gx";
			}
		}]
	});
});

//左上弹出
$(".btn10").on("click",function(){
	$.GxPop({
		title:"提示",
		boxCss:{
			"top":"0",
			"left":"0",
			width:200
			//height:200
		},
		content:"左上弹出",
		btn:[{
			text:"关闭",
			callback:function(){
				return "gx";
			}
		}]
	});
});

//右上弹出
$(".btn11").on("click",function(){
	$.GxPop({
		title:"提示",
		boxCss:{
			"top":"0",
			"right":"0",
			"left":"initial",
			width:200
			//height:200
		},
		content:"左上弹出",
		btn:[{
			text:"关闭",
			callback:function(){
				return "gx";
			}
		}]
	});
});

$(".btn12").on("click",function(){
	$.GxPop({
		content:"3秒后执行callback",
		autoRun:{
			time:3000,
			callback:function(){
				alert(111);
				return "gx";
			}
		}
	});
});
//到了这个时间就不弹出
$(".btn13").on("click",function(){
	$.GxPop({
		content:"嗯嗯，就是这样！",
		endDate:"2018/02/05"
	});
});

//点了弹出，再点不弹出，21秒后再点可以再次弹出
$(".btn14").on("click",function(){
	$.GxPop({
		content:"嗯嗯，就是这样！",
		cookie:{
			name:"gdg",
			value:"1302x",
			time:0.006 //0.006*3600=21.6秒  21秒后可以再次弹出
		}
	});
});

</script>
</body>
</html>
